<template>
  <div>
    <ComponentCard title="今日订单" :value="numberFormat(orderToday)">
      <div ref="lineChartRef" style="width:100%;height:100%;"></div>
      <template #footer>
        <span>昨日订单量</span>
        <span class="emphasis">{{moneyFormat(orderLastDay)}}</span>
      </template>
    </ComponentCard>
  </div>
</template>
<script lang="ts">
export default {
  name: "order"
};
</script>
<script lang="ts" setup>
import ComponentCard from "./ComponentCard.vue";
import { ref, onMounted, computed, watch } from "vue";
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts'
import useFormat from "@/hooks/useFormat";
// store
import {useReportStore} from "@/stores/reportData";
const reportDataStore = useReportStore()
// 定义一个ref 关联到页面中的ref标签上面
const lineChartRef = ref()
let chart: EChartsType
const {numberFormat,moneyFormat} = useFormat()  //格式化数据
const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留空白
    //   data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
      data:orderTrendAxis.value
    },
    yAxis: {
      show: false // 不显示y轴及标线
    },
    // 设置图标类型，数据
    series: [
      {
        name: '实时订单数',
        type: 'line',
        // 列表数据
        // data: orderTrend.value,
        // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
        data:orderTrend.value,
        // 线条光滑
        smooth: true,
        // 区域的样式
        areaStyle: {
          color: 'purple'
        },
        // 折线拐点的样式
        itemStyle: {
          opacity: 0
        },
        // 线的样式
        lineStyle: {
          opacity: 0
        }
      }
    ],
    // 图表在坐标中显示的位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true
    }
  }
}
// 1.页面挂载完成数据渲染
onMounted(() => {
  chart = echarts.init(lineChartRef.value)
  // chart.setOption(getOption())  //和watch重复渲染
  // 当页面尺寸变化的时候，也需要变化
  window.addEventListener('resize', () => {
    chart && chart.resize()
  })
})
// 2.计算属性处理数据
const orderToday = computed(()=> reportDataStore.reportData.orderToday)
const orderLastDay = computed(()=>reportDataStore.reportData.orderLastDay)
const orderTrend = computed(()=>reportDataStore.reportData.orderTrend)
const orderTrendAxis = computed(()=>reportDataStore.reportData.orderTrendAxis)
// 3.数据监听，当数据变化了，也就是数据回来在渲染页面，数据是从store仓库拿的，这个过程是异步的，需要监听数据的变化
watch(orderToday,()=>{
  chart.setOption(getOption())
})
</script>
<style scoped>

</style>